<template>
  <div class="edit">
    <van-nav-bar title="我的资料" class="head">
      <template #title>
        <span v-if="$route.query.property === 'nickname'">修改昵称</span>
        <span v-if="$route.query.property === 'avatar'">修改头像</span>
        <span v-if="$route.query.property === 'intro'">修改个性签名</span>
        <span v-if="$route.query.property === 'position'">修改我的岗位</span>
      </template>
      <template #left>
        <i
          @click="$router.go(-1)"
          class="iconfont iconbtn_nav_back myicon"
        ></i>
      </template>
      <template #right>
        <span v-if="isShow" @click="submit">保存</span>
      </template>
    </van-nav-bar>
    <div class="main">
      <van-form ref="form">
        <van-uploader
          max-count="1"
          preview-size="200px"
          class="userIcon"
          v-model="avatar"
          name="avatar"
          :after-read="afterRead"
          v-if="$route.query.property === 'avatar'"
        />
      </van-form>
      <van-field
        class="myField"
        v-model="nickname"
        :placeholder="userInfo.nickname"
        @input="isShow = true"
        v-if="$route.query.property === 'nickname'"
      />
      <van-field
        class="myField"
        v-model="intro"
        :placeholder="userInfo.intro"
        @input="isShow = true"
        v-if="$route.query.property === 'intro'"
        type="textarea"
      />
      <van-field
        class="myField"
        v-model="position"
        :placeholder="userInfo.position"
        @input="isShow = true"
        v-if="$route.query.property === 'position'"
      />
    </div>
  </div>
</template>
<script>
import { editUser, getImg } from '@/api/user'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      isShow: false,
      nickname: '',
      intro: '',
      imgId: 0,
      position: '',
      avatar: [
        {
          url:
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1208777900,2205110458&fm=26&gp=0.jpg'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  created () {
    this.nickname = this.userInfo.nickname
    this.intro = this.userInfo.intro
    this.position = this.userInfo.position
    this.avatar[0].url = this.userInfo.avatar
  },
  methods: {
    async afterRead (file) {
      this.isShow = true
      // console.log('file', file)
      file.status = 'uploading'
      file.message = '上传中...'
      const res = await getImg(file.file)
      this.imgId = res.data[0].id
      file.status = 'done'
    },
    async submit () {
      this.$toast.loading({
        duration: 0
      })
      if (this.$route.query.property === 'avatar') {
        await editUser({ avatar: this.imgId })
      }
      if (this.$route.query.property === 'nickname') {
        await editUser({ nickname: this.nickname })
      }
      if (this.$route.query.property === 'intro') {
        await editUser({ intro: this.intro })
      }
      if (this.$route.query.property === 'position') {
        await editUser({ position: this.position })
      }
      this.$toast.success('修改成功')
      this.$store.dispatch('setUserInfo')
      this.$router.push('/info')
    }
  }
}
</script>
<style lang="less">
.edit {
  font-size: 12px;
  .head {
    .myicon {
      font-size: 30px;
    }
  }
  .main {
    margin: 15px;
    border-radius: 10px;
    text-align: center;
    .userIcon {
      text-align: center;
    }
    .myField {
      background-color: #eee;
    }
    // background-color: red;
  }
}
</style>
